import { render, connect } from '../../../../../hrpub/common/frame'
import BtnAction from '../../actions/btn';
import PubAction from '../../actions/pub';
import ReferSearch from '../../../../../hrpub/common/components/referSearch/org'
import HeaderAction from './actions/header.js';
import {base,high} from 'nc-lightapp-front';
import './index.less'
import NCBackBtn from "../../../../../hrpub/common/components/hr-back"
import BodyAction from '../table/actions/body';

const {
    NCSelect
} = base;

const {NCOption} = NCSelect;

const Header = render({
    actions: {
        btnAction: BtnAction,
        pubAction: PubAction,
        headerAction: HeaderAction,
        bodyAction: BodyAction
    }
})(({ props, action, state }) => {
    const { main,button,cardPagination} = props
    const { createButtonApp } = button
    const { createCardPagination } = cardPagination;
    const statusList = action.headerAction.getOrderStatusList();
    let changePageComonent = main.showChangePage ? (createCardPagination({
        handlePageInfoChange: action.headerAction.handlePageInfoChange
    })) : null
    let createFixedCard = main.showChangePage ? (() => {
        return (
            <div className='nc-bill-header-area'>
                <div className='header-title-search-area'>
                </div>
                <div className="header-button-area">
                    {
                        changePageComonent
                    }
                </div>
            </div>
        )
    })() : null
    return (
        <div className="header">
            <div className="dismission-header-middle-content"  style={{display: main.showPage === 'list'?'':'none'}}>
                <span className="header-middle-org-wrapper">
                    <ReferSearch
                        orgVal={main.orgvalue}
                        getOrgData={action.headerAction.changeOrg}
                        showEmpty={main.widget?true:false}
                    />
                </span>
                <span className="header-middle-item-wrapper" style={{display:main.orgvalue.refpk ?'':'none'}}>
                    <NCSelect
                        style={{
                            width: '160px'
                        }}
                        showClear={false}
                        onChange={action.headerAction.changeOrderStatus}
                        value={main.orderStatus}
                    >
                        {statusList.map((item) => {
                            return (
                                <NCOption
                                    key={item.key}
                                >
                                    {item.label}
                                </NCOption>
                            );
                        })}
                    </NCSelect>
                </span>
            </div>
            <div>
                <NCBackBtn
                    style={{ display: main.showPage === 'card'?'':'none'}}
                    onClick={action.headerAction.back}
                    >
                </NCBackBtn>
            </div>
            <div className="header-btn" style={{display:main.orgvalue.refpk ?'':'none'}}>
                {createButtonApp({
                    area: 'head',
                    onButtonClick: action.btnAction.onButtonClick
                })}
            </div>
            <div  className="changePage" style={{ float: 'right' }}>
                {createFixedCard}
            </div>
        </div>
    )
})



export default connect(Header)
